<template>
  <div class="home">
    <h3>房东故事</h3>
    <scroll-view class="content" ref="scroll">
      <template v-if="!isLoad">
        <div class="box">
          <router-link
            class="figure"
            v-for="item in store"
            :key="item.goodsId"
            :to="{name:'detail',params: {id:item._id}}"
          >
            <img :src="item.picUrl" alt="" />
            <div class="he">
              <i class="iconfont icon-dingwei"></i>
              <figcaption class="title">{{ item.title }}</figcaption>
            </div>

            <figcaption class="offical">{{ item.offical }}</figcaption>
          </router-link>
        </div>
        <!-- <router-view></router-view> -->
      </template>
    </scroll-view>
  </div>
</template>

<script>
import { Store } from "../../../api/hotel";

import { List, Toast } from "vant";
import { recordApi, cxrecordApi, deleterecordApi } from "../../../api/record"
export default {
  components: {
    [List.name]: List,
    [Toast.name]: Toast,
  },
  name: "host-stories",
  props: {},
  data() {
    return {
      store: [],
      isLoad: false,
      page: 1,
      count: 4,
    };
  },
  methods: {
    async request() {
      const { data, error } = await Store({
        page: this.page,
        count: this.count,
      });
      // console.log(this.store);
      let st = data.map(({ _id, title, picUrl, offical }) => ({
        _id,
        title,
        picUrl,
        offical,
      }));
      this.store = [...this.store, ...st];
      if (data.length == 0) {
        Toast("没有更多了。。。");
      }
      // console.log(this.store);
    },
   
  },
  created() {
    this.request();
  },
  mounted() {
    const scroll = this.$refs.scroll.scroll;

    scroll.on("scrollEnd", () => {
      // console.log(scroll.y, scroll.maxScrollY);
      if (scroll.y === scroll.maxScrollY) {
        // console.log("123");

        // 请求房东故事
        this.page++;
        this.request();
      }
    });
  },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return ($px / 750) * 100vw;
}
.home {
  background-color: rgba(251, 251, 251, 1);
  h3 {
    padding-bottom: vw(10);
    font-weight: bold;
    font-size: vw(40);
  }
}
.list {
  width: 100%;
  overflow: hidden;
}
.box {
  column-count: 2;
}
a {
  break-inside: avoid !important;
  color: #333;
  box-shadow: rgba(194, 190, 190, 0.3) 0px 0px 5px;
  border-color: rgba(204, 204, 204, 1);
  display: inline-block;
  margin-bottom: vw(20);
  border-radius: vw(10);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.box .he {
  font-size: vw(14);
  display: flex;
  i {
    margin-right: vw(10);
  }
}
.box img {
  width: 100%;
  display: block;
}
// .box figcaption {
// }
</style>
